import { TjForm } from '@/tjComponents';
import TjMarketingUnit from '@/tjComponents/TjMarketingUnit';
import React, { useEffect } from 'react';
import MonthSelect from '../MonthSelect';
import { DatePicker } from 'antd';
import { useForm } from 'antd/lib/form/Form';

const layout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 19 },
};
const SxModalContent: React.FC<ISxModalContentProps> = (props) => {
  const [form] = useForm();

  useEffect(() => {
    props.getHandler &&
      props.getHandler(() => {
        return new Promise((resolve, reject) => {
          form
            .validateFields()
            .then((values: any) => {
              resolve(values);
            })
            .catch((values: any) => {
              reject(values);
            });
        });
      });
  });

  return (
    <div className="sx-modal-content">
      <TjForm
        form={form}
        {...layout}
        initialValues={props.initValue}
        items={[
          {
            label: '交易单元',
            name: 'stationIdList',
            rules: [{ required: true, message: '请选择交易单元' }],
            render: <TjMarketingUnit treeData={props.treeData} marketId={props.marketId} />,
          },
          {
            label: '年份',
            name: 'year',
            rules: [{ required: true, message: '请选择年份' }],
            render: <DatePicker picker="year" style={{ width: '100%' }} />,
          },
          {
            label: '主动入市月份',
            name: 'list',
            render: <MonthSelect />,
          },
        ]}
      />
    </div>
  );
};

interface ISxModalContentProps {
  treeData: any[];
  marketId?: string;
  initValue?: any;
  getHandler?: (fn: () => Promise<any>) => void;
}

export default SxModalContent;
